<template>
  <div>
    <h2>插槽</h2>
    <com-header></com-header>
    <slot-main :type="type">
      <!-- 默认插槽可以不写template,但是如果内部有传值到外部用template，用3种写法，#是v-slot:的简写 -->
      <!-- <p>首页</p> -->
      <!-- <template #default><p>首页</p></template> -->
      <!-- <template><p>首页</p></template> -->
      <!-- 具名插槽带上名字 #是v-slot:的简写-->
      <template #default="{ num3 }"
        ><div>
          <p>首页---传进来的值：{{ num3 }}</p>
          <el-divider></el-divider>
          <p>mixin:{{ message }}--{{ foo }}--{{ name }}</p>
        </div></template
      >
      <template v-slot:name1="{ num1 }"
        ><p>name1插槽---传进来的值：{{ num1 }}</p></template
      >
      <template #name2="{ num2 }"
        ><p>name2插槽---传进来的值：{{ num2 }}</p></template
      >
    </slot-main>
    <com-footer></com-footer>
  </div>
</template>

<script>
import ComHeader from './components/com-header'
import ComFooter from './components/com-footer'
import SlotMain from './components/slot-main'
// 引入mixin--https://v2.cn.vuejs.org/v2/guide/mixins.html
import mixin from './mixin'
export default {
  name: 'day-5',
  components: {
    ComHeader,
    ComFooter,
    SlotMain
  },
  data() {
    return {
      type: 'success'
    }
  },
  mixins: [mixin],
  mounted() {
    this.mixinfun()
  }
}
</script>

<style lang="scss" scoped>
body {
  margin: 0;
  padding: 0;
}
</style>
